<!doctype html>
<html>

	<head>
		<title>我的订单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/style.css">
		<style>
			.checkeder {
				color: #fb8714;
				background-image: url(assets/images/you.png);
				background-color: #eee;
				background-size: 1.95rem;
				background-repeat: no-repeat;
				background-position: 97% center;
			}
			.order_title font span{
				color:inherit
			}
			#MyOrder li:nth-last-child(1){
				margin-bottom: 0;
			}
			/*#cover_box::after{
				content: "";
				height: 0;
				display: block;
				clear: both;
			}*/
			.btns{
				text-align: center;
				float: left;
				width: 40%;	
				border-radius: 1rem;
			}
		</style>
	</head>

	<body>
		<div class="containter">
			<header data-am-widget="header" class="am-header am-header-default">
				<div class="am-header-left am-header-nav">
					<a href="javascript:;" onClick="javascript :history.back(-1);">
						<img src="assets/images/left.png">
					</a>
				</div>
				<h1 class="am-header-title">
      我的订单
    </h1>
			</header>
			<div style="width: 100%; height:4rem;"></div>
			<div class="order-list">
				<ul id="MyOrder">
					<!--<li>
						<p>订单编号：F172055586614146
							<font>￥3082.5</font>
						</p>
						<a href="order_list.html">
							<img src="assets/images/image.png" alt="">
							<div class="order-right">
								<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
								<span>行程天数：4天</span><span>游客人数：1人</span>
								<font>旅游团期：2017-03-03至2017-04-24</font>
							</div>
							<div class="clear"></div>
						</a>
						<p class="bottom">
							<button class="btn-xq">查看详情</button>
							<button class="btn-qx">取消</button>
							<button class="btn-zf">立即支付</button>
						</p>
					</li>
					<li>
						<p>订单编号：F172055586614146
							<font>￥3082.5</font>
						</p>
						<a href="order_list.html">
							<img src="assets/images/image.png" alt="">
							<div class="order-right">
								<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
								<span>行程天数：4天</span><span>游客人数：1人</span>
								<font>旅游团期：2017-03-03至2017-04-24</font>
							</div>
							<div class="clear"></div>
						</a>
						<p class="bottom">
							<button class="btn-xq">查看详情</button>
							<button class="btn-qx btn-yqx">已取消</button>
						</p>
					</li>
					<li>
						<p>订单编号：F172055586614146
							<font>￥3082.5</font>
						</p>
						<a href="order_list.html">
							<img src="assets/images/image.png" alt="">
							<div class="order-right">
								<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
								<span>行程天数：4天</span><span>游客人数：1人</span>
								<font>旅游团期：2017-03-03至2017-04-24</font>
							</div>
							<div class="clear"></div>
						</a>
						<p class="bottom">
							<button class="btn-xq">查看详情</button>
							<button class="btn-qx btn-yqx">已付款</button>
						</p>
					</li>
					<li>
						<p>订单编号：F172055586614146
							<font>￥3082.5</font>
						</p>
						<a href="order_list.html">
							<img src="assets/images/image.png" alt="">
							<div class="order-right">
								<h2>【纯玩】三亚蜈支洲岛南湾猴岛西岛南山四天双飞团</h2>
								<span>行程天数：4天</span><span>游客人数：1人</span>
								<font>旅游团期：2017-03-03至2017-04-24</font>
							</div>
							<div class="clear"></div>
						</a>
						<p class="bottom">
							<button class="btn-xq">查看详情</button>
							<button class="btn-qx">取消</button>
							<button class="btn-zf btn-yqx">已预约</button>
						</p>
					</li>-->
				</ul>
				<div id="loading">数据加载中...</div>
				<div id="nomoreData">亲，已经加载完了！</div>
				
			</div>
			<div id="cover_box" style="display:none;position: fixed;width: 100%;height: 100%;background:rgba(0,0,0,0.6);margin: auto;top:0;left: 0;right: 0;bottom: 0;z-index: 100000;">
				<div id="certain" style="position: absolute;background: #fff ;width:60%;height:8.5rem;margin: auto;top:0;left: 0;right: 0;bottom: 0;border-radius: 1rem;">
					<p id="title" style="height: 5rem;text-align: center;line-height: 5rem;margin-bottom: 0.5rem;">是否要取消订单?</p>
					<div id="under_box" style="height: 3rem;line-height: 3rem;">
						<div id="yes" class="btns" style="margin: 0 6.5%;">确定</div>
						<div id="no" class="btns" >再看看</div>
					</div>
				</div>
			</div>
		</div>
		<div id="toast" style="top:-4rem;"></div>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/allUse.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<!--6.4我的订单-->
		<script type="text/javascript">
			var orderPageToken="";
				myOrder();
			function myOrder(){
				$.ajax({
					type: "get",
					url: url_enter+"/api/get_my_order_list",
					headers:headers,
					data: {
						"next_page_token":orderPageToken
					},
					success: function(data, status, xhr) {
						console.log(data);
						if(data.result===1){
							if(data.data.order_list){
								for(var i=0;i<data.data.order_list.length;i++){
									switch(data.data.order_list[i].status){
										case 0://未付款
										$("#MyOrder").append('<li depart="'
									+data.data.order_list[i].depart+'"><p class="order_title">订单编号：<span class="order_no">'
									+data.data.order_list[i].order_no+'</span><font>￥<span class="order_price">'
									+data.data.order_list[i].price+'</span></font></p><img src="'
									+data.data.order_list[i].image+'" alt=""><div class="order-right"><h2>'
									+data.data.order_list[i].title+'</h2><span>行程天数：'
									+data.data.order_list[i].days+'天</span><span class="people_num">游客人数：<span class="total_num" style="margin:0">'
									+data.data.order_list[i].tourist_num+'</span>人</span><font>旅游团期：<span style="margin:0" class="depart">'
									+data.data.order_list[i].time_start+'</span>至'
									+data.data.order_list[i].time_end+'</font></div><div class="clear"></div><p class="bottom"><button class="btn-xq" status="'
									+data.data.order_list[i].status+'" myOrder_no="'
									+data.data.order_list[i].order_no+'">查看详情</button><button class="btn-qx" myOrder_no="'
									+data.data.order_list[i].order_no+'">取消</button><button class="btn-zf">立即支付</button></p></li>');break;
										case 1://已付款
										$("#MyOrder").append('<li><p>订单编号：'
									+data.data.order_list[i].order_no+'<font>￥<span>'
									+data.data.order_list[i].price+'</span></font></p><img src="'
									+data.data.order_list[i].image+'" alt=""><div class="order-right"><h2>'
									+data.data.order_list[i].title+'</h2><span>行程天数：'
									+data.data.order_list[i].days+'天</span><span>游客人数：'
									+data.data.order_list[i].tourist_num+'人</span><font>旅游团期：'
									+data.data.order_list[i].time_start+'至'
									+data.data.order_list[i].time_end+'</font></div><div class="clear"></div><p class="bottom"><button class="btn-xq" status="'
									+data.data.order_list[i].status+'" myOrder_no="'
									+data.data.order_list[i].order_no+'">查看详情</button><button class="complete" myOrder_no="'
									+data.data.order_list[i].order_no+'">已付款</button></p></li>');break;
										case 2://已取消
										$("#MyOrder").append('<li><p>订单编号：'
									+data.data.order_list[i].order_no+'<font>￥<span>'
									+data.data.order_list[i].price+'</span></font></p><img src="'
									+data.data.order_list[i].image+'" alt=""><div class="order-right"><h2>'
									+data.data.order_list[i].title+'</h2><span>行程天数：'
									+data.data.order_list[i].days+'天</span><span>游客人数：<span style="margin:0" class="total_num">'
									+data.data.order_list[i].tourist_num+'</span>人</span><font>旅游团期：'
									+data.data.order_list[i].time_start+'至'
									+data.data.order_list[i].time_end+'</font></div><div class="clear"></div><p class="bottom"><button class="btn-xq" status="'
									+data.data.order_list[i].status+'" myOrder_no="'
									+data.data.order_list[i].order_no+'">查看详情</button><button class="cancel">已取消</button></p></li>');break;
									}
									
								};
								$(".btn-xq").click(function(){
									var total_price=$(this).parent().parent($("li")).find($(".order_title .order_price")).html();
									var card_no=$(this).parent().parent($("li")).find($(".order_title .order_no")).html();
									var title=$(this).parent().parent($("li")).find($(".order-right h2")).html();
									var time_start=$(this).parent().parent($("li")).find($(".order-right font .depart")).html();
									var total_num=$(this).parent().parent($("li")).find($(".order-right .people_num .total_num")).html();
									var depart=$(this).parent().parent($("li")).attr("depart");
									window.sessionStorage.setItem("show_depart",depart)
									var tit_req='{"total_price":'
										+total_price+',"card_no":"'
										+card_no+'","title":"'
										+title+'","time_start":"'
										+time_start+'","total_num":"'
										+total_num+'"}'
										console.log(tit_req);
										console.log(depart);
									window.sessionStorage.setItem("from_pay",tit_req);
									var obj={"Myorder_no":""+$(this).attr("myOrder_no")+"","status":""+$(this).attr("status")+""}
									sessionStorage.setItem("Myorder_no",JSON.stringify(obj));
									window.location.href="order_show.html";
								});
								
								$(".btn-qx").click(function(){
									var order_no=$(this).attr("myOrder_no")
									$("#cover_box").show();
									$("#no").click(function(){
										$("#cover_box").hide();
										return;
									})
									$("#yes").click(function(){								
										$("#cover_box").hide();
										$.ajax({
											type:"post",
											url:url_enter+"/api/cancel_order",
											headers: {
												"User-Token":token, //next_page_token: “xxxx”:第一页访问时传空，调用后服务端返回此字段，如果字段值为空，则没有下一页内容了，否则还有下一页内容。访问下一页内容时，参数值为上次服务端返回的值。
												"Os":ios_Andriod,
												"Device-Id":"",
												"Screen":wh,
												"Content-Type": "application/x-www-form-urlencoded"
											},
											data:{
												"order_no":""+order_no+""
											},
											success:function(data){
												console.log(1111)
												console.log(data);
												if(data.result===1){
													alert("取消成功")
													window.location.reload()
												}else{
													alert(data.message)
												}
											}
										})
										})
									
								});
								orderPageToken=data.data.next_page_token;
								if(orderPageToken){
									var scrollHeight=$(document).height();
									$("#loading").show();
									$("#nomoreData").hide();
									$(window).scroll(function(){
										var scrollTop=$(this).scrollTop();
										var windowHeight =$(this).height();
										if(scrollTop + windowHeight === scrollHeight){
											myOrder();　
									    　}
									})
								}else{
									$("#loading").hide();
									$("#nomoreData").show();
								}
								$(".btn-zf").click(function(){
									var total_price=$(this).parent().parent($("li")).find($(".order_title .order_price")).html();
									var card_no=$(this).parent().parent($("li")).find($(".order_title .order_no")).html();
									var title=$(this).parent().parent($("li")).find($(".order-right h2")).html();
									var time_start=$(this).parent().parent($("li")).find($(".order-right font .depart")).html();
									var total_num=$(this).parent().parent($("li")).find($(".order-right .people_num .total_num")).html();
									var depart=$(this).parent().parent($("li")).attr("depart");
									var order_no=$(this).parent().parent($("li")).find($(".order_title .order_no")).html();;
									window.sessionStorage.setItem("show_depart",depart);
									var tit_req='{"total_price":'
										+total_price+',"card_no":"'
										+card_no+'","title":"'
										+title+'","time_start":"'
										+time_start+'","total_num":"'
										+total_num+'","order_no":"'+order_no+'"}';
									window.sessionStorage.setItem("from_pay",tit_req);
									window.location.href="pay.html"
								});
							}else{
								show_hide(true)
								alert("您暂时没有订单哦~");
								
							};
							
							
						}else{
							alert(data.message)
						};
					},
					error: function(xhr, status, thrown) {
						console.log(xhr);
					}
				});	
				function show_hide(flag){
					if(flag){
						$("#loading").hide();
						$("#nomoreData").show();
					}else{
						$("#loading").show();
						$("#nomoreData").hide();
					}
				}
			};
			
		</script>

				<!--6.8订单详情-->

		<script type="text/javascript">
//				$.ajax({
//					type: "post",
//					url: "http://119.23.70.141/api/get_order_detail",
//					headers: {
//						"User-Token": "abc",
//						"Os": localStorage.ios_Andriod,
//						"Device-Id": "pc",
//						"Screen": localStorage.wh,
//						"Content-Type": "application/x-www-form-urlencoded"
//					},
//					data: {
////						 “order_id”:1,//订单ID序列号，整数类型（Int）
//					},
//					success: function(data, status, xhr) {
//						 var dingdanxiangqing=data;
//						console.log(data);
//					},
//					error: function(xhr, status, thrown) {
//						console.log(xhr);
//					}
//				});
		</script>
		
	</body>

</html>